<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jstl/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:converge="http://com.interactivemediamanagement.converge/tags">

    <converge:moduleHeader moduleTitle="#{msgs.newsitem_ACTORS}" />
    <div>
        <rich:dataTable id="dtNewsItemActors" var="actor" value="#{value.selectedNewsItem.actors}" columnClasses="left, left" rowClasses="odd, even" style="width: 96%; margin-left: 2%; margin-right: 2%;  border: 0px;">
            <rich:column style="width: 37px;  border: 0px;">
                <h:graphicImage styleClass="profilePhoto" value="/UserPhoto?uid=#{actor.user.id}" alt="#{actor.user.fullName}" title="#{actor.user.fullName}" height="32" width="32" />
            </rich:column>
            <rich:column style="border: 0px;">
                <h:panelGrid>
                    <h:outputText value="#{actor.user.fullName}" style="font-weight: bold; font-size: 11px;" title="#{actor.user.fullName}">
                        <f:converter converterId="i2m.abbreviationDisplay" />
                        <f:attribute name="maxLength" value="19" />
                    </h:outputText>
                    <h:outputText value="#{actor.role.name}" style="font-size: 10px;" />
                </h:panelGrid>
            </rich:column>
        </rich:dataTable>
        <c:if test="#{value.currentActor &amp;&amp; !value.readOnly}">
            <div style="width: 100%; text-align: center;">
                <a4j:commandLink ajaxSingle="true" actionListener="#{value.onActorSelect}" reRender="mpActorSelect">
                    <h:outputText value="#{msgs.newsitem_ADD_REMOVE}" />
                    <rich:componentControl for="mpActorSelect" operation="show" event="oncomplete" />
                </a4j:commandLink>
            </div>
        </c:if>
    </div>

    <a4j:region id="regActorSelect">
        <rich:modalPanel id="mpActorSelect" autosized="true" domElementAttachment="parent" rendered="#{value.currentActor}">
            <f:facet name="header">
                <h:panelGroup>
                    <h:outputText value="#{msgs.newsitem_ACTORS}"></h:outputText>
                </h:panelGroup>
            </f:facet>
            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage id="imgCloseActorSelect" value="#{res.DIALOGUE_CLOSE_ICON}" style="link" />
                    <rich:componentControl for="mpActorSelect" attachTo="imgCloseActorSelect" operation="hide" event="onclick"/>
                </h:panelGroup>
            </f:facet>

            <h:panelGrid style="width: 480px;">

                <rich:tabPanel id="tpActorSelect" switchType="client" activeTabClass="tabActive" inactiveTabClass="tabInactive">

                    <rich:tab label="#{msgs.newsitem_ACTORS}">
                        <h:panelGrid columnClasses="tabSheet" style="padding: 10px; width: 100%">

                            <rich:dataTable id="dtActorEdit" var="actor" value="#{value.selectedNewsItem.actors}" styleClass="table" rowClasses="odd, even" style="width: 100%">

                                <rich:column>
                                    <h:outputText value="#{actor.role.name}" />
                                </rich:column>

                                <rich:column>
                                    <h:outputText value="#{actor.user.fullName}" />
                                </rich:column>

                                <rich:column styleClass="columnIcon center">
                                    <a4j:commandLink onclick="if (confirm('#{msgs.newsitem_REMOVE_ACTOR_PROMPT}') != true){ return false; };" rendered="#{userSession.user != actor.user}" ajaxSingle="true" reRender="dtActorEdit, dtNewsItemActors">
                                        <f:setPropertyActionListener value="#{actor}" target="#{value.deleteActor}" />
                                        <h:graphicImage alt="#{msgs.DELETE}" title="#{msgs.DELETE}" value="#{res.DELETE_ICON}"/>
                                    </a4j:commandLink>
                                </rich:column>
                            </rich:dataTable>

                            <h:outputText value="New Actor" style="font-weight: bold" />
                            <h:panelGrid columns="3">
                                <h:outputText value="Role" />
                                <h:outputText value="User" />
                                <h:outputText value="" />
                                <h:selectOneMenu id="somNewActorRole" value="#{value.newActor.role}" converter="#{converters.userRoleConverter}">
                                    <f:selectItem itemLabel="- Select Role -" />
                                    <f:selectItems value="#{value.outletRoles}" />
                                    <a4j:support event="onchange" reRender="somNewActorUser" />
                                </h:selectOneMenu>

                                <h:selectOneMenu id="somNewActorUser" value="#{value.newActor.user}" converter="#{converters.userAccountConverter}">
                                    <f:selectItem itemLabel="- Select User -" />
                                    <f:selectItems value="#{value.roleUsers}" />
                                </h:selectOneMenu>

                                <a4j:commandButton value="#{msgs.ADD}" styleClass="button dynamicButton" actionListener="#{value.onAddActor}" reRender="somNewActorRole, somNewActorUser, dtActorEdit, dtNewsItemActors" />
                            </h:panelGrid>

                        </h:panelGrid>
                    </rich:tab>
                </rich:tabPanel>

                <h:panelGroup styleClass="dialogueButtons">
                    <h:commandLink id="lnkCancelActorSelect" styleClass="dialogButton" value="#{msgs.CLOSE}" onclick="#{rich:component('mpActorSelect')}.hide(); return false;" />
                </h:panelGroup>

            </h:panelGrid>

        </rich:modalPanel>
    </a4j:region>

    <div style="clear: both; padding-bottom: 12px;"></div>

</ui:composition>